Giovanna me decía si podíamos añadir un menú sencillo así que aquí va uno sencillo y vistoso a la vez. Nos situamos antes de ]]></b:skin> para añadir los estilos que son los siguientes.
#menu div.colormenu,
#menu div.colormenu a.menu {
font-family: sans-serif, Verdana, Arial;
font-size: 12pt;
color: white;
}
#menu div.colormenu {
text-align: left;
}
#menu div.colormenu a.menu {
background-color: #333;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.colormenu a.menu:hover {
background-color: #940f04;
}
Los colores los podemos modificar considerando que el color de fondo se muestra de la siguiente forma.
a.menu: tal y como lo vemos.
a.menu:hover: al pasar el cursor.
Si también queremos mostrar un color distinto al seleccionar el botón del menú podemos conseguirlo añadiendo a los estilos
#menu div.colormenu a.menu:active {
background-color:#ccc;
}
Ahora editamos un nuevo gadget escogiendo la opción HTML y en su interior añadimos lo siguiente:
<div id="menu"><div class="colormenu">
<a class="menu" href="#">Enlace 1</a>
<a class="menu" href="#">Enlace 2</a>
<a class="menu" href="#">Enlace 3</a>
<a class="menu" href="#">Enlace 4</a>
</div></div>
En lugar de texto Enlace 1 - 2- 3- 4 añadimos el texto que hará de enlace.
Donde el asterisco # lo sustituimos por la url del sitio que vamos a enlazar ya sea en el mismo blog o enlace externo.
Con "background" modificamos el color de fondo y el de fuente en "color"
Gema como el menú va en un gadget no es más interesante incluir hay mismo el css y no en la plantilla?
Es que las plantillas al final están llenas de código y por otro lado si eliminamos el gadget podemos olvidarnos de borrar el codigo de la plantilla.
Podrás poner también como incluirlo en el propio gadget?
yz MALINA esa es la opción que usamos cuando se añaden ejemplos en las entradas añadir los estilos y el código en la misma entrada para no recargar la plantilla.
Es muy buena tu idea, lo ideal sería añadirlo en la plantilla para ir viendo en vista previa y luego llevarlo al gadget.
Sería suficiente con añadir antes de los estilos <style type="text/css"> y al final </style>
Gema, amiga, justo hoy estoy estrenando menú y nueva cara en mi blog ya que cumple seis meses! Habría querido escribir una entrada al respecto pero con tanta modificación no me dió el tiempo.
Tiene algunos detallitos para arreglar pero... estoy tan contenta y vine a dejar mi alegría por acá ya que lo he conseguido gracias a tí y a Rosa.
Besos genia.
yz Gracias Fabiana te dejé un mensajito allá, espero que disfrutes tu blog durante mucho tiempo :)
me gustaria saber como poner un menu vertical que se facil muchas gracias
Me parecía más complicado! sencillo claro, para ti jajaja, que sabes, y muy buena la idea de Malina. Qué gusto, tienes truco para todo :) y además queda muy vistoso.
He conseguido poner el mensaje en la pagina principal y otro para todas las demás, recuerdas? pero al ser dos gadgets de texto se nota mucho que hay una separación entre el segundo y la primera entrada en la pag.parincipal. Podría arreglarlo de alguna manera? (y de paso de mas tu opnión, que me fio muuuuucho mucho de ti :) Igual lo hago más chiquitin??
Gracias guapa. Viene genial hacer cambios en la plantilla para no pensar en nada...
POr cierto, qué bien está quedando, y se carga rapidísimo con el E8 !!!! genial!
jo, pero echo de menos el buscador de abajo que me gustaba... yo por pedir... :D
QUE BIEN!! Ya funciona! GRACIAS GEMA!!!
yz Intente solucionarlo Maite, pero luego he leído tu mail... pensaba que era así como decías. Mañana ya me explicas porque con el buscador superior te lleva fuera del blog y con el inferior a las entradas desplegables.
qué halagador un bonito anónimo... :)
En el buscador de abajo hoy me dice ésto Gema "No se encuentra la página. Lo sentimos, la página que estabas buscando en el blog Gem@ BLOG no existe". Ayer sí veía las entradas desplegables, pero todas, no lo hacía siguiendo las palabras claves a buscar, como antaño.
Era cómodo para encontrar más rápido por títulos y encontrar y molestarte menos. Te estoy volviendo loca :(
Y si no ya me acostumbraré al de arriba ;) Besote
yz Pues si Maite hay personas perseverantes que al parecer no tienen blog con lo sencillo que es crearse uno y vienen a dejar su huella a este, cosa que no le doy importancia pero pienso que en el suyo tendrían más espacio para decir y ser oídos.
Sobre el buscador por un momento estuvo funcionado como dices, lo veré de nuevo porque parece ser que ese buscador y yo nos caemos mal mutuamente :O
HOLA, SOY UN POCO NUEVO EN TODO ESTO
YO QUERIA UTILIZAR ESTOS BOTONES PARA PONER INFORMACION CUANDO SE PINCHA EN ELLOS PERO NO ME HACE NADA.ME PODIAS DECIR PORQUE?
GRACIAS
yz Ana y bego que no vi vuestro comentario sorry.. hay muchos modelos de menú vertical, en la etiqueta de mi nube "Menús" puedes ver alguno, también hay una página donde puedes escoger entre varios modelos puedes verla aquí:
http://gemablog-.blogspot.com/2008/03/listamatic2-mens-verticales-y.html
Y aquí...
http://gemablog-.blogspot.com/2008/02/listamatic-gran-surtido-de-mens.html
Accede a las páginas de Listamatic y si ves algo que te guste me lo dices y vemos como añadirlo ;)
yz INMA Y ANGEL porque falta añadir el enlace. Donde dice href="#" sustituimos esto--> # por la url de la página que vamos a enlazar, la url la conseguimos copiando la dirección de la barra del navegador cuando visualizamos la página que vamos a enlazar.
Gem@:
Gracias al fin Tengo MENU y quedo super bien, he modificado los colores sin problemas. Ahora tengo una duda, para hacer los enlaces: en las entradas los nombres de cada boton seran una etiqueta o seran enlaces de url enlazadas con los titulos de cada entrada???
Gracias mil eres todo corazon
yz Giovanna ahora a cada línea de menú (la parte que añadiste en el gadget) le añades el enlace de esta forma:
<a class="menu" href="aquí añades la url de la entrada">Enlace 1</a> donde dice por ejemplo Enlace 1 pones el texto que corresponde con lo que vas a enlazar.
Luego haces lo siguiente ... haces click en el título de la entrada y copias la url del navegador y la pegas en ese espacio que dice "aquí añades la url de la entrada" los siguientes más de lo mismo.
yz Mira Giovanna aquí puedes ver como configurar un menú, aunque es un modelo distinto la forma de configurarlo es la misma, también explico como añadir el enlace de correo.
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html
Hola gema, soy un seguidor de tu blog, realmente me encanta como explicas las cosas, muy concisa. Bueno aqui voy, estoy haciendo mi segundo blog y resulta que quiero ponerle un menu desplegable en la parte superior pero no lo he conseguido. Probé de todas formas y no hubo caso. Quieres que explique aqui mi duda??(es un poquito extenso), sino te dejo un correo por las dudas nahuelburbach@hotmail.com. Saludos!!
yz Hola Nahuel déjame mejor un enlace a ese blog que pueda verlo es lo más efectivo :)
Mi nombre lleva al blog, es www.solobusquedas.blogspot.com. Te cuento, baje un menu desde la pagina http://www.cssmenumaker.com/builder/menu_info.php?menu=007 en la cual tu puedes personalizar el menu a tu gusto y luego descargas el menu y su codigo. El archivo contiene una carpeta con las imagenes para el menu y otro archivo .css donde trae el codigo. Lo copie tal cual, reemplaze las direcciones de las imagenes por las url de las imagenes subidas a un servidor, pero no se ve como debe ser, es como que esta incompleto. Muchas gracias por tu atencion! Saludos!
Aaa otro problema es que debe quedar bien arriba pero sin embargo parece como que todavia esta la navbar de blogger
Gema la flechita de bajar colocada al pie de la entrada no funciona (al menos a mi)
yz Pues llevas razón Nahuel que tienes el perfil activado pero no sé porqué desde la confirmación de comentario no tiene enlace. Sobre el menú es lógico que no veas las imágenes porque no las tienes añadidas en la parte del CSS :O
Sobre subirlo más arriba mira bien porque me da la sensación que tienes algún gadget en esa parte.
yz MALINA muchas gracias por avisarme, tenía pendiente subirla un poco y por una cosa u otra lo he ido dejando, es un enlace que sólo aparece cuando la entrada se ve completa para dirigirnos al formulario pero no sabía que había dejado de funcionar.
Ya lo he solucionado ¡Gracias!
Uuu mil disculpas! :D De tanto probar lo deje mal. Ahora lo solucione pero sigue sin aparecer el menu como deberia.
Teoricamente el gadget que esta bien arriba es el menu, es mas, no hay otro gadget, excepto el de la cabecera que no lo puedo eliminar pero que esta por debajo del menu.
Gracias gema por la ayuda!
Hola gema, lo probe y lo maximo que pude hacer es lo que esta ahora. Logre que quede bien arriba modificando el codigo. Lo que no puedo hacer es que la letra se vea en blanco:O. Te hago una pregunta que la tengo picando desde que empeze, como puedo hacer para que el ancho del menu se adapte a la resolución de cada usuario?? Saludos!:D
yz Nahuel ese código de tu menú es muy raro :O prueba donde añadiste el color de la letra a añadirlo así color: #ffffff !important;
Por otra parte lo que se adaptaría a la resolución no es el menú sino la página, eso normalmente se hace con blogs diseñados de forma que miden más de 1024 de ancho (el tuyo es de 840)para no verse obligado a utilizar el cursor.
De todas formas no tengo nada explicad osobre ese tema sin embargo J.Miur si que escribió sobre ese tema. No he podido localizar esa entrada pero te dejo en enlace ;)
Vagabundia
Bueno el tema de la letra busque por todos lados el color y sin embargo no lo encontre. De ultima debere cambiar de menu, lo elegi a ese porque me gusto, pero debe haber algun otro, lo voy a buscar como menus drop down y voy a ver que encuentro.
Con respecto al tema de que se adapte la pagina a la resolucion voy a investigar en el blog que me pasaste.
Ahora, te hago una ultima consultilla si es que no te molesta jeje. Al final de la pagina coloque un pequeño texto que dice "copyright bla bla" pero lo coloque en letra chiquitita y en minuscula, pero sin embargo aparece en mayusculas y con letra un poquito mas grande.
Realmente agradezco tu ayuda! Saludos!!:D
Hola Gem@,
Como estas? yo contentisima, al fin he terminado mi blog, claro faltan los detalles, aun cuando creo que en los detalles esta la diferencia, pero creo q para ser principiante no ha quedado nada de mal, pero eso por que tuve una gran guia y master en el tema...no me canso de agradecerte gemita por toda la paciencia q tuviste y la ayuda desinteresada que me has brindado.
esto no hubiera sido posible sin tus consejos...
Cariños a la distancia
Giovanna
yz Hola Giovanna la verdad que comentarios como este tuyo son los que animan a sentarse aquí cada día, el mérito es solamente tuyo que como bien dices eres principiante en el tema.
El tema de los detalles cuando tu quieras los vamos viendo.
Cariños amiga :)
yz Nahuel a los estilos de letra añade:
text-transform: none;
De esa forma el texto se muestra tal y como lo escribimos ;)
Alguien sabe como hacer para que el ancho y alto se puedan variar, intente aplicando hheihgt y width al css pero no funciona gracias
yz Saul inténtalo con el padding ;)
Hola Gema! Esta es la última pregunta que te hago respecto a mi blog, espero! Jaja. Mirá, yo quería poner ese menú simple que habías explicado como poner en cualquier parte de la cabecera pero no había forma que quedara bien asique decidi por este.
Le puse una imagen en vez de color a los botones :)
Bueno, lo que quiero lograr es que este menú, que está ubicado en el crosscol, quede pegado a la cabecera, y más a la derecha.
Probé con todos los padding, margin, etc., del crosscol y del menú, uno por uno, todos juntos...no hay forma! También deje el margin del header en 0, como leí por ahí en un post tuyo.
Creeme que antes de molestarte siempre intento hacerlo sola pero no puedo! Es lo último que me falta para quedar conforme :D
Espero puedas ayudarme, gracias!!!
Ah..el blog es blupruebas.blogspot.com
Recién me doy cuenta que con la imagen de fondo en los botones, no cambia al pasar el cursor :D
yz Gabuleta lo primero de todo que me voy a enfadar si dices eso que será la última pregunta :D También me enfadaré si piensas que molestas, es decir que me enfado por todo jajajaja
Fuera de bromas, he visto el menú pero tengo que mirar mejor el código fuente y comprobar esas medidas.
El Domingo estaré con el otro PC y haré la prueba en mi blog,cuando tenga la respuesta te contesto aquí mismo :)
jajaja Gracias por la buena onda! :D POr ahí me incomoda preguntar tanto :)
Buenisimo entonces, en cuanto arregle eso me queda listo el blog! Que felicidad jaja.
Un abrazo y buen fin de semana!!
Estoy por arrancarme los pelos! jaja. En firefox se ve arriba del header. Te aviso porque una vez me dijiste que usas ese navegador entonces no vas a entender cual era mi problema. Bueno, ahora hay dos! jaja
besos
yz He tardado pero creo que ha valido la pena, puedes ver la última entrada:
http://gemablog-.blogspot.com/2009/08/menu-con-variables-de-fuentes-y-colores.html
Las explicaciones son las mismas que ves en esa entrada pero los estilos cambiarían un poco respecto a medidas, sería de la siguiente forma:
.menu {
width:900px;
height:37px;
}
.menu ul{
padding:5px 10px 10px 0;
margin:0px;
float:right;
list-style:none;
border-right: 1px solid $menuBorderColor;
background-image:url('http://img2.pict.com/6e/aa/15/1498430/0/13.png');
}
.menu li{
padding:0px;
margin:0px;
float:left;
list-style:none;
line-height:32px;
}
.menu a{
float:right;
display:block;
padding:0 15px 0 15px;
color: $menuTextColor;
font: $menuTextFont;
border-left: 1px solid $menuBorderColor;
}
.menu a:hover{
color: $menuHoverTextColor;
background: $menuHoverBgColor;
}
Si deseas que salga justo después del banner en lugar de añadirlo antes de <div id='header-wrapper'> lo añades justo después del cierre de la cabecera, sería después de algo así:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='El título de tu blog (cabecera)' type='Header'/>
</b:section>
</div>
Cualquier cosa ya me dices algo, siento la demora :(
Hola! Gem@. Que importante es tu blog. Tengo mucho tratando de poner la tercera columna a mi blog: www.guiapedagogicaglobal.com y me resulta imposible o dificil, por que los valores son relativos. Dime como resolverlo por favor.
Gema, tengo un problema con mi menú superior. Tengo la plantilla "Isabella" y me deja hacer enlaces en la parte superior, pero los títulos tienen que ser cortos porque si no, se enciman unos con otros.
¿que puedo hacer para que los títulos puedan ser largos?
Gracias de antemano.
EL blog es: www.elrincondenataliatrujillo.blogspot.com
Besos
HOla!! me encanta tu blog pero te voy a exponer mi problema:
yo tengo un blog es www.jovenescofradescabra.blogspot.com y Resulta que estoy en la creación de un menu con onmouse ya lo hice lo puse en un gaget para probarlo y me iva estupendamente pero el problemas es que a la hora de ponerlo en la plantilla para colocarlo arriba sale solo la primera imagen. porfavor ayuda!!. Gracias de antemano
yz PEDRO CRUZ PEREZ si en tu blog no tienes opción de subir imagen en la cabecera desde plantilla de diseño intentalo siguiendo estos pasos, puedes verlo en vista previa:
http://gemablog-.blogspot.com/2007/01/ttulo-en-blogger-beta.html
yz Nataly en los estilos del menú prueba donde dice #navigation li a{ a aumentar el width: 60px ;)
yz Jose Antonio yo veo el menú con todas las imágenes :O
hola gem@, estoy a punto de poner un menú, pobablemente éste, mi pregunta es si es necesario siempre eliminar la barra navegadora de blogger para poner un menú, y la segunda pregunta es si puedo crear el menú e ir añadiendo las urls de a poco.
yz lk la barra sólo la eliminamos si elmenú se añade sustituyéndola es decir lo primero que vemos en el blog.
Los enlaces se pueden añadir en el orden que uno quiera.
sí, gracias gem@, ya estuve haciendo pruebas y la única posibilidad que tengo por la estructura de la página http://paraninosconcabeza.blogspot.com es eliminar la barra de blogger... no sé por qué no tengo la opción de poner un módulo html por encima de la cabecera (¿hay solución para eso?). además abajo de todo del footer no sé si quedaría bien...
te preguntaba si puedo ir añadiendo las urls de a poco una vez tenga instalado el menú. tenkiu!
perdona, no leí tu respuesta hasta el final. estoy escrachada. tengo mucho trabajo y estudios...
yz lk mira esta entrada:
http://gemablog-.blogspot.com/2007/06/aadir-elementos-en-pgina-de-diseo.html
La última entrada publicada también te será de ayuda.
hola gem@, acabo de poner menú en http://libroscolgados.blogspot.com, pero verás que queda pegado al recuadro del título (muy feo). ¿se te ocurre alguna forma de separarlo?
hola gema, he puesto uno de tus menús en http://cielosdondeestaeldinero.blogspot.com, pero no es el que me gusta. me gusta éste. el problema es que cuando pongo la segunda parte en un widget HTML me aparece naturalmente en la sidebar. ¿cómo hago para que me aparezca arriba del título? tankiu
:: Es muy sencillo cn, en plantilla de diseño arrastras el gadget hasta situarlo sobre el título.
Aunque lo ideal es que lo añadas directamente en un gadget en ese sitio sin necesidad de arrastrarlo :)
:: Lamento no ver tu comentario antes lK :S
hola gema@, es que en mi plantilla no aparece la posibilidad de poner un gadget encima del título (una mínima left)... ¿?
:: Ninguna plantilla lo tiene lk pero puedes añadirlo:
http://gemablog-.blogspot.com/2007/06/aadir-elementos-en-pgina-de-diseo.html
hola gem@!! mi menú con widget sobre el título ha quedado PRECIOSO. pro ¿cómo hago para justificarlo a la derecha? en http://cielosdondeestaeldinero.blogspot.com. tenkiu
:: cn donde dice:
#menu div.colormenu {
text-align:left;
prueba con text-align:center; yo he probado y te queda bien centrado ;)
hola a todos de republica dominicana
:: Saludos Sheribel :)
muy buen post
aun tengo una duda soy nuevo en esto
me salio el menu
pero como hago para poner cada entrada en cada submenu
:: En la siguiente entrada puedes ver la forma de configurar un menú ;)
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html
Hola Gem@! Andaba buscando como lograr este efecto y gracias a ti lo he conseguido :) pero tengo una pregunta... si quiero eliminar el espacio que se hace entre los enlaces, como le hago? estaba modificando la propiedad padding, pero me di cuenta que esa es para modificar el tamaño del fondo del link... espero entiendas lo que quiero hacer. Gracias!
:: Miroshiです~ añade margi-left como ves a continuación marcado en negrita.
#menu div.colormenu, #menu div.colormenu a.menu {
color: white;
font-family: sans-serif,Verdana,Arial;
font-size: 10pt;
margin-left: -5px;
}
Hola Gema, que buen Menu.
Como puede disminuir o aumentar el espacio entre las pestañas?
Nota: solo los miembros de este blog pueden publicar comentarios.